<template>
  <div class="layout">
    <el-container class="container">
      <el-aside class="aside">
        <div class="head">
          <div>
            <img
              src="https://s.weituibao.com/1582958061265/mlogo.png"
              alt="logo"
            />
            <span>新峰</span>
          </div>
        </div>
        <div class="line" />
        <el-menu
          style="height: 100%"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
          <template v-for="item in menu">
            <el-submenu
              :index="item.path"
              v-if="item.children"
              :key="item.path"
            >
              <template #title>{{ item.text }}</template>
              <el-menu-item
                :index="'/manage' + item.path + it.path"
                v-for="it in item.children"
                :key="it.path"
                ><i :class="it.icon"></i>{{ it.text }}</el-menu-item
              >
            </el-submenu>
            <el-menu-item
              :key="item.path"
              :index="'/manage' + item.path"
              v-else
              >{{ item.text }}</el-menu-item
            >
          </template>
        </el-menu>
      </el-aside>
      <el-container class="content">
        <!-- ----------------新加右侧头部--------------- -->
        <el-header>
          <div class="her">{{ header }}</div>
          <div
            style="
              width: 141px;
              display: flex;
              align-items: center;
              justify-content: space-evenly;
            "
          >
            <span><i class="el-icon-s-custom"></i></span>
            <span>{{ Mname }}</span>
            <span>
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <i class="el-icon-caret-bottom el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item class="clearfix">
                    登录名:{{ loginname }}
                    <!-- 
                    <el-button type="danger" size="mini" @click="logout"
                      >退出</el-button
                    > -->
                    <el-button type="danger" size="mini">退出</el-button>

                    <el-badge class="mark" />
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix">
                    昵称：{{ Mname }}
                    <el-badge class="mark" />
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </div>
        </el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import Vue from "vue";
import { mapState, mapMutations } from "vuex";
import {
  Container,
  Header,
  Aside,
  Main,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
} from "element-ui";
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
export default {
  name: "Manage",

  data() {
    return {
      loginname: "",
      Mname: "",
      header: "系统介绍",
      menu: [
        {
          path: "/dashboard",
          text: "Dashboard",
          children: [
            {
              path: "/introduction",
              text: "系统介绍",
              icon: "el-icon-data-analysis",
            },
            {
              path: "/dash",
              text: "Dashboard",
              icon: "el-icon-odometer",
            },
            {
              path: "/add",
              text: "添加商品",
              icon: "el-icon-plus",
            },
          ],
        },
        {
          path: "/homepage",
          text: "首页配置",
          children: [
            {
              path: "/slideshow",
              text: "轮播图配置",
              icon: "el-icon-picture",
            },
            {
              path: "/hotproduct",
              text: "热销商品配置",
              icon: "el-icon-star-on",
            },
            {
              path: "/newproduct",
              text: "新品上线配置",
              icon: "el-icon-sell",
            },
            {
              path: "/recommend",
              text: "为你推荐配置",
              icon: "el-icon-thumb",
            },
          ],
        },
        {
          path: "/modulegl",
          text: "模块管理",
          icon: "el-icon-user",
          children: [
            {
              path: "/classify",
              text: "分类管理",
              icon: "el-icon-menu",
            },
            {
              path: "/show",
              text: "商品管理",
              icon: "el-icon-s-goods",
            },
            {
              path: "/member",
              text: "会员管理",
              icon: "el-icon-user-solid",
            },
            {
              path: "/order",
              text: "订单管理",
              icon: "el-icon-s-order",
            },
          ],
        },
        {
          path: "/system",
          text: "系统管理",
          children: [
            {
              path: "/psduser",
              text: "修改密码",
              icon: "el-icon-lock",
            },
          ],
        },
      ],
    };
  },
  computed: {
    // ...mapState("user", ["userInfo"]),
  },
  created() {
    this.getLogin();
  },
  methods: {
    // ...mapMutations("user", {
    //   logout(commit) {
    //     commit("logout");
    //     this.$router.push("/login");
    //   },
    // }),
    getLogin() {
      this.$request
        .get("/adminUser/profile", {
          headers: {
            "X-Requested-With": "XMLHttpRequest",
            token: localStorage.getItem("token") || "",
          },
        })
        .then((data) => {
          this.loginname = data.data.data.loginUserName;
          this.Mname = data.data.data.nickName;
          // console.log("111data", data.data.data);
        });
    },
  },
  watch: {
    $route: function (to) {
      switch (to.name) {
        case "Introduction":
          this.header = "系统介绍";
          break;
        case "Dash":
          this.header = "大盘数据";
          break;
        case "AddUser":
          this.header = "添加商品";
          break;
        case "Slideshow":
          this.header = "轮播图配置";
          break;
        case "Hotproduct":
          this.header = "热销商品设置";
          break;
        case "Newproduct":
          this.header = "新品上线配置";
          break;
        case "Recommend":
          this.header = "为你推荐配置";
          break;
        case "Classify":
          this.header = "分类管理";
          break;
        case "ShowList":
          this.header = "商品管理";
          break;
        case "Member":
          this.header = "会员管理";
          break;
        case "Order":
          this.header = "订单管理";
          break;
        case "PsdUser":
          this.header = "修改账户";
          break;
      }
    },
  },
};
</script>
<style scoped>
.layout {
  min-height: 100vh;
  background-color: #ffffff;
}
.container {
  height: 100vh;
}
.aside {
  width: 200px !important;
  background-color: #222832;
  overflow: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}
.aside::-webkit-scrollbar {
  display: none;
}
.head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}
.head > div {
  display: flex;
  align-items: center;
}

.head img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.head span {
  font-size: 20px;
  color: #ffffff;
}
.line {
  border-top: 1px solid hsla(0, 0%, 100%, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.content {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  overflow: hidden;
}
.main {
  height: calc(100vh - 100px);
  overflow: auto;
  padding: 10px;
}
.el-menu {
  background-color: #222832 !important;
}
.el-menu-item {
  background-color: #222832 !important;
}
</style>
<style>
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.el-menu {
  border-right: none !important;
}
.el-submenu {
  border-top: 1px solid hsla(0, 0%, 100%, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.el-submenu:first-child {
  border-top: none;
}
.el-submenu [class^="el-icon-"] {
  vertical-align: -1px !important;
}
a {
  color: #409eff;
  text-decoration: none;
}
.el-pagination {
  text-align: center;
  margin-top: 20px;
}
.el-popper__arrow {
  display: none;
}

/* 新加右侧头部样式 */
.el-header {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
  /* font-weight: 700; */
}
.el-header > .her {
  font-size: 20px;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #fff;
  color: #606266;
}
.el-button--mini,
.el-button--mini.is-round {
  padding: 7px 7px;
  margin-left: 20px;
}
</style>
